﻿.bannerImg {
    background-position: center bottom;
}

.bannerImg:before {
    content: none;
}

#content-banner-mobile .bannerImgMobile {
    background-position: center top;
}

#content-banner-mobile .bannerImgMobile:before {
    content: none;
}

#marca-info {
    display: grid;
    gap: 20px;
    grid-template-columns: 35% 1fr;
    padding: 100px 14% 55px 3%;
}

#marca-info #marca-info-col-1 img {
    width: 100%;
}

#marca-info #marca-info-col-2 #marca-info-col-2-title {
    color: #519122;
    font-size: 50px;
    font-family: "Mohr-Regular";
}

#marca-info #marca-info-col-2 #marca-info-col-2-text {
    color: #707070;
    font-size: 16px;
    font-family: "Mohr-Medium";
}

#marca-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 3% 80px;
}

#marca-cards .marca-card {
    display: flex;
    flex-direction: column;
    width: calc(25% - 20px);
    border-radius: 6px;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
}

#marca-cards .marca-card .marca-card-box-img {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 6px 6px 0 0;
}

#marca-cards .marca-card .marca-card-box-img img {
    max-width: 100%;
    max-height: 100%;
}

#marca-cards .marca-card .marca-card-box-text {
    padding: 30px;
}

#marca-cards .marca-card .marca-card-title {
    margin: 0 0 15px;
    color: #779126;
    font-size: 24px;
    font-family: "Mohr-Medium";
}

#marca-cards .marca-card .marca-card-box-text {
    color: #707070;
    font-size: 16px;
    font-family: "Mohr-Medium";
}

#footer-img img {
    display: block;
    margin: 0 0 0 auto;
}

#line {
    height: 6px;
    width: 100%;
    background-color: #519122;
}

@media screen and (max-width: 1366px) {
    #marca-info {
        grid-template-columns: 1fr 1fr;
        padding: 100px 3% 55px 3%;
    }
}

@media screen and (max-width: 1280px) {
    #marca-cards .marca-card {
        width: calc(33.33% - 20px);
    }
}

@media screen and (max-width: 1024px) {
    #marca-info {
        grid-template-columns: 1fr;
    }

    #marca-info #marca-info-col-1 img {
        display: block;
        margin: auto;
        width: 70%;
    }
}

@media screen and (max-width: 960px) {
    #marca-cards .marca-card {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 600px) {
    #marca-info #marca-info-col-2 #marca-info-col-2-title {
        font-size: 30px;
    }
    
    #marca-cards .marca-card {
        width: calc(100% - 20px);
    }

    #footer-img img {
        width: 30%;
    }
}